﻿<div class="ui-widget-content">
    <h3>Slider</h3>
    <p>
       O slider é um componente visual muito interessante para ler algum tipo de entrada, que esteja em uma determinada faixa, de valores do usuário.
    </p>

    <p>
        É realmente muito simples criar um slider: <span class="codigo">$('#meu_slider1').slider();</span><br/>
        Para recuperar seu valor atual: <span class="codigo">$('#meu_slider1').slider( 'value' );</span>
        <div id="meu_slider1" style="width: 500px; margin-left: 10px;"></div>
    </p>

    <p>
        Podemos ainda delimitar os valores máximo e mínimo: <span class="codigo">$('#meu_slider2').slider({range: true, min: 0, max: 500, step: 50, value: 250});</span>
        <div id="meu_slider2" style="width: 500px; margin-left: 10px;"></div>
    </p>

    <p>
        Delimitando um intervalo de valores: <span class="codigo">$('#meu_slider3').slider({min: 0, max: 500, step: 10, values: [150, 350], range: true});</span>
        <div id="meu_slider3" style="width: 500px; margin-left: 10px;"></div>
    </p>

    <p>
        Slider vertical: <span class="codigo">$('#meu_slider4').slider({min: 0, max: 100, value: 50, orientation: "vertical"});</span>
        <div id="meu_slider4" style="height: 100px; margin-left: 10px;"></div>
    </p>

    <p>
        <div style="float: left;">
            Definido o range "min" ou range "max":
            <pre>$('#meu_slider5').slider({min: 0, max: 100, value: 50, range: "min"});</pre>
            <pre>$('#meu_slider6').slider({min: 0, max: 100, value: 50, range: "max"});</pre>
        </div>
        <div style="height: 120px; float: left; margin-left: 10px;">
            <span id="meu_slider5" style="float: left;"></span>
            <span id="meu_slider6" style="float: left; margin-left: 15px;"></span>
        </div>
        <div style="clear: both;"></div>
    </p>

    <script type="text/javascript">
        inicializador.sliderInit = function() {
            $("#meu_slider1").slider();
            $("#meu_slider2").slider({min: 0, max: 500, step: 50, value: 250});
            $("#meu_slider3").slider({min: 0, max: 500, step: 10, values: [150, 350], range: true});
            $("#meu_slider4").slider({min: 0, max: 100, value: 50, orientation: "vertical"});
            $("#meu_slider5").slider({min: 0, max: 100, value: 50, orientation: "vertical", range: "min"});
            $("#meu_slider6").slider({min: 0, max: 100, value: 50, orientation: "vertical", range: "max"});
        };
    </script>
</div>
